<template>
  <div class="btn"
  @click="handlerClick"
  :class="{primary:type=='primary',
  success:type=='success',danger:type=='danger'}">
      <!-- 匿名插槽 -->
      <slot></slot>
  </div>
</template>

<script>
export default {
  props:{
    type:{
      type:String
    }
  },
  methods:{
    handlerClick(e){
      console.log(e);
      this.$emit('click',e);
      console.log('点击触发handlerClick()通过this.$emit(),里面自定义事件(click)把MouseEvent对象(e)传值,然后父级@click=login监听mybutton的事件click调用login()方法,login调用userLogin方法通过封装的axios方法,发起post异步请求,然后发起和响应 .then请求回调返回成功res响应信息或者.catch请求回调err失败的信息');
    }
  }
}
</script>

<style lang="less" scoped>
  .btn{
       width: 318*100vw/360; 
       height: 50px;
       background-color: rgb(70, 158, 12);
       border-radius: 25px;
       line-height: 50px;
       text-align: center;
       color:#fff;
       font-weight: bold;
       font-size: 20px;

    }
    .primary{
      background: #6cf;
      color: #fff;
    }
    .success{
      // background-color:#07c160;
      background-color:#51b2f9;
      color: #fff;
    }
    .danger{
      // background-color: rgb(219, 216, 2);
      background-color: rgb(241, 4, 4);
    }
</style>